import React, { Component } from 'react';
import { List } from 'react-virtualized';
class HKList extends Component {
  state = {
    list: [
      'Brian Vaughn1',
      'Brian Vaughn2',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
    ]
  }

  show = () => {
    console.log("自己的点击事件");
  }
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    return (
      <div key={key} style={style}>
        <button onClick={this.show} >    {this.state.list[index]}</button>
      </div>
    );
  }
  render() {
    return (
      <List
        width={200}
        height={100}
        rowCount={this.state.list.length}
        rowHeight={50}
        rowRenderer={this.rowRenderer}
      />
    );
  }
}
export default HKList;